<template>
  <div>
    <div class="margin-bottom-15">
      <add-button :on-click="handleClick"></add-button>
    </div>
    <el-table-block2
      :column="column"
      :data="rows"
      border
      :pagination="true"
      :currentPage="pagination.pageNo"
      :pageSize="pagination.pageSize"
      :total="pagination.total"
      @currentChange="handleCurrentChange"
      :height="dataTableHeight"
      ref="tableBlock2"
    />
    <!--编辑设备信息-->
    <equip-input v-bind="$props" :success="fetchList" ref="EquipInput1"></equip-input>
    <!--监测项目维护-->
    <factors-input v-bind="$props" ref="FactorsInput1"></factors-input>
  </div>
</template>

<script>
import EquipInput from '@/views/theApp/site/components/EquipInput'
import { equipmentDelete, equipmentEquipPageList } from '@/api/commonApi'
import FactorsInput from '@/views/theApp/site/components/FactorsInput'

export default {
  name: 'EquipShow',
  props: {
    // 站点编码
    pointCode: {
      type: String,
      default: ''
    },
    // 站点编码
    monitorType: {
      type: String,
      default: 'airtype'
    },
    dataTableHeight: {
      type: Number,
      default: 450
    }
  },
  components: {
    EquipInput,
    FactorsInput
  },
  data() {
    return {
      equipCode: '',
      equipList: [],
      pagination: {
        total: 0,
        pageNo: 1,
        pageSize: 15
      },
      column: [
        { label: '设备名称', prop: 'eqName', align: 'center' },
        { label: '设备编码', prop: 'eqCode', align: 'center' },
        { label: '设备型号', prop: 'eqType', align: 'center' },
        { label: 'mn', prop: 'mn', align: 'center' },
        { label: 'SIM卡号', prop: 'simNo', align: 'center' },
        {
          label: '状态',
          prop: 'isStop',
          align: 'center',
          renderBody: (h, { row, $index }) => {
            return <div>{row.isStop == 1 ? '启用' : '停用'}</div>
          }
        },
        {
          label: '操作',
          prop: '操作',
          align: 'center',
          width: 300,
          renderBody: (h, { row, $index }) => {
            return (
              <div>
                <el-link
                  type="primary"
                  class="color-base"
                  onClick={() => {
                    this.handleAddFactor(row)
                  }}
                >
                  设置监测项目
                </el-link>
                <split-vline class="margin-left-15 margin-right-15"></split-vline>
                <el-link
                  type="primary"
                  className="color-base"
                  onClick={() => {
                    this.editEquip(row)
                  }}
                >
                  修改
                </el-link>
                <split-vline class="margin-left-15 margin-right-15"></split-vline>
                <el-link
                  type="primary"
                  class="color-base"
                  onClick={() => {
                    this.removeRow(row)
                  }}
                >
                  删除
                </el-link>
              </div>
            )
          }
        }
      ],
      rows: []
    }
  },
  methods: {
    handleCurrentChange(v) {
      this.pagination.pageNo = v
      this.fetchList()
    },
    // 获取设备列表
    fetchList() {
      const queryObj = {
        pointCode: this.pointCode,
        monitorType: this.monitorType,
        ...this.pagination
      }
      equipmentEquipPageList(queryObj).then(res => {
        this.rows = res.rows
        this.pagination.total = res.total
      })
    },
    // 新增设备
    handleClick() {
      this.editEquip(null)
    },
    // 新增修改设备
    editEquip(row) {
      this.$refs.EquipInput1.open(row)
    },
    removeRow(row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        equipmentDelete({ id: row.id }).then(res => {
          this.$message({
            message: `操作成功`,
            type: 'success'
          })
          this.fetchList()
        })
      })
    },
    // 关联监测因子
    handleAddFactor(row) {
      this.$refs.FactorsInput1.open(row)
    }
  },
  watch: {
    pointCode() {
      this.fetchList()
    },
    dataTableHeight: {
      handler() {
        this.$refs.tableBlock2.doLayout()
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/pages/index.scss';
</style>
